<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="javax.servlet.ServletContext" %>
<%@ page import="jspservlet.vo.WindowDoor" %>
<%@ page import="jspservlet.vo.Lamp" %>
<%@ page import="jspservlet.vo.Thermometer" %>
<%@ page import="jspservlet.vo.Hygrometer" %>
<%@ page import="javax.imageio.ImageIO" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="css/reset.css" rel="stylesheet" />
    <link href="css/iconfont.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <!-- <script src="js/jquery-1.9.1.min.js"></script> -->
    <script src="js/f.js"></script>
    <title>Equipment Management</title>
</head>
<body>
    <base href="<%=basePath%>">
    <%ArrayList<WindowDoor> windowdoor_list=(ArrayList<WindowDoor>)application.getAttribute("windowdoor_list");%>
    <%ArrayList<Lamp> lamp_list=(ArrayList<Lamp>)application.getAttribute("lamp_list");%>
    <%ArrayList<Thermometer> thermometer_list=(ArrayList<Thermometer>)application.getAttribute("thermometer_list");%>
    <%ArrayList<Hygrometer> hygrometer_list=(ArrayList<Hygrometer>)application.getAttribute("hygrometer_list");%>
    <div class="PublicHead clearfix">
        <div class="leftBox clearfix">
            <!--<i class="iconfont icon-caidan"></i>-->

            <div class="companyText">
                Smart Home Management System
            </div>
        </div>
        <div class="RightBox clearfix">
            <div class="UserPhotoBox">
                <div class="UserPic">
                    <img src="images/user.jpg" />
                </div>
                <div class="UserName">
                    <% String username = (String) application.getAttribute("username");%>
                    Hello, <%= username %>!
                </div>
            </div>
            <a href="index.jsp">
                <div class="dropOutBox">
                    <i class="iconfont icon-app_icons--">
                    </i>
                    <span>Exit</span>
                </div>
            </a>
        </div>
    </div>

    <div class="PublicDownWhole clearfix">
        <!--左侧-->
        <div class="leftBox Js_leftBox">
            <ul>
                <a href="EqpmtManagement.jsp"> <li class="Select"><i class="iconfont icon-weibiaoti1"></i><span>Equipment</span></li></a>
                <a href="ModifyInfo.jsp"> <li><i class="iconfont icon-yonghuguanli"></i><span>Modify Infomation</span></li></a>
                <a href="ModifyPsw.jsp"> <li><i class="iconfont icon-tubiao_dingdan"></i><span>Modify Password</span></li></a>
            </ul>
        </div>
        <!--右侧-->
        <div class="RightBox">
            <div class="PublicContentBox">
                <!--公用指向页面名字-->
                <div class="PublicPointToAgeText">
                    <span class="span1">Equipment Management </span>
                </div>
                <!--查询--><!-- 
                <div class="InquireBox clearfix">
                    <div class="InquireleftBox">
                        <div class="Text">订单号：</div>
                        <div class="InputDiv">   <input class="phoneInput" placeholder="请输入你需要查询的订单号" /></div>
                    </div>
                    <div class="PublicBtnIcon Color1Btn fr">
                        <i class="iconfont icon-icon-chaxun"></i>
                        <span>查询</span>
                    </div>
                </div> -->
                <!--表修改-->
                <div class="InquireTableBox">
                    <div class="headbox">
                        <!--批量Delete-->
                        <div class="PublicBtnIcon Color5Btn">
                            <i class="iconfont  icon-shanchu"></i>
                            <span>Delete</span>
                        </div>

                        <div class="PublicBtnIcon Color5Btn fr Js_edit">
                            <i class="iconfont icon-changyongtubiao-mianxing-"></i>
                            <span>Add</span>
                        </div>
                    </div>

                    <!--设备-->

                    <div class="InquireSelectTable">
                        <table class="PublicTableCss">
                            <thead>
                                <tr>
                                    <td>
                                        <!-- <input id="inputcheck" class="inputcheck" type="checkbox" name="inputcheck" /> -->
                                        <label for="inputcheck"></label>
                                        <span>Equipments</span>
                                    </td>
                                    <td>Type</td>
                                    <td>Pic</td>
                                    <td>Infomation </td>
                                    <td>Operation</td>
                                </tr>

                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                        </td>
                                        <td>Door</td>
                                        <td><img class="DOOR" src="images/door/0.png" alt="Closed"  height=40 width=40></td>
                                        <td><span id="DOOR">Closed</span></td>
                                        <td><button class="door" id="door" οnclick="changedoor()">Open</button>
                                            <div class="PublicBtnIcon Color5Btn fr2 Js_edit2">
                                            <!-- <i class="iconfont icon-changyongtubiao-mianxing-"></i> -->
                                            <span>Modify Password</span>
                                        </div></td>
                                        
                                </tr>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                        </td>
                                        <td>Window</td>
                                        <td><img class="WINDOW" src="images/window/0.png" alt="Closed"  height=40 width=40></td>
                                        <td><span id="WINDOW">Closed</span></td>
                                        <td><button class="window" id="window" οnclick="changewindow()">Open</button></td>
                                        
                                </tr>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                        </td>
                                        <td>Cover</td>
                                        <td><img class="COVER" src="images/cover/0.png" alt="Closed"  height=40 width=40></td>
                                        <td><span id="COVER">Closed</span></td>
                                        <td><button class="cover1" id="cover1" οnclick="changecover()">Open</button>  <button class="cover2" οnclick="autocover()">Auto</button></td>
                                        
                                </tr>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                        </td>
                                        <td>Fan</td>
                                        <td><img class="FAN" src="images/fan/0.png" alt="Closed"  height=40 width=40></td>
                                        <td><span id="FAN">Closed</span></td>
                                        <td><button class="fan1" id="fan1" οnclick="changefan()">Open</button>  <button class="fan2" οnclick="autofan()">Auto</button></td>
                                        
                                </tr>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                        </td>
                                        <td>Lamp</td>
                                        <td><img class="LAMP" src="images/lamp/0.png" alt="Closed"  height=40 width=40></td>
                                        <td><span id="LAMP">Closed</span></td>
                                        <td>
                                            <table>
                                                <tr>
                                                    <td><span class="demonstration">Luminance</span></td>
                                                    <td><span class="demonstration">Colour</span></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div id="app11">
                                                            <el-slider
                                                              v-model="value1"
                                                              :step="1"
                                                              :max="5">
                                                            </el-slider>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div id="app22">
                                                            <el-color-picker v-model="color2"></el-color-picker>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>
                                          <!-- <button class="lamp" οnclick="changelamp()">Change</button> -->
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                        </td>
                                        <td>Fire Alarm</td>
                                        <td><img class="FIRE" src="images/fire/0.png" alt="Safe"  height=40 width=40></td>
                                        <td><span id="FIRE">Safe</span></td>
                                        <td></td>
                                </tr>
                                
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                        </td>
                                        <td>Security Alarm</td>
                                        <td><img class="SEC" src="images/sec/0.png" alt="Off"  height=40 width=40></td>
                                        <td><span id="SEC">Off</span></td>
                                        <td><button class="sec" id="sec" οnclick="changesec()">Open</button></td>
                                        
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- <div class="ModifyUserBoxOut">
                        <div class="ModifyLastBox clearfix">
                            <br /><br /><br />
                            <input type="submit" class="RightBox" name ="submit" value="Modify"/>
                        </div><br /><br /><br /><br /><br /></div>
                    </div> -->
                    
                    <!--分页-->
                    <!-- <div class="PageNumber">
                        <div class="NumbersBox">
                            <div class="LeftArrow">
                                上一页
                            </div>
                            <ul>
                                <li class="Select">1</li>
                                <li class="">2</li>
                                <li class="">...</li>
                                <li class="">4</li>
                                <li class="">5</li>
                            </ul>
                            <div class="RightArrow ">
                                下一页
                            </div>
                        </div>
                    </div> -->


                </div>
            </div>
            <br />
            <br />

        </div>
    </div>


    <!-- alert通用 提示是否Delete-->
    <div class="PublicFloatBox f_delete">
        <div class="f_MiddleBox wid260">
            <div class="f_Head">
                <span>Hint Message</span>
                <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
            </div>
            <div class="f_content clearfix">
                <!--Hint Message内容-->
                <div class="f_someText">
                    <i class="iconfont icon-tishi"></i>
                    <span>Delete this for sure?</span>
                </div>
                <!--按钮-->
                <div class="f_pormatBtn  clearfix">
                    <div class="f_pormatBtn1">
                        Conform
                    </div>
                    <div class="f_pormatBtn2">
                        Delete
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Add User浮层-->
    <div class="PublicFloatBox adduser">
        <div class="f_MiddleBox wid400">
            <div class="f_Head">
                <span>Add Equipment</span>
                <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
            </div>
            <div class="f_content">
                <div class="f_alonediv">
                    <div class="f_alone_name">
                        Equipment ID:
                    </div>
                    <div class="f_alone_input">
                        <input class="f_p_input" />
                    </div>
                    <!--Hint Message-->
                    <div class="f_pormat">
                        Please input correct ID
                    </div>
                </div>
                <div class="f_alonediv">
                    <div class="f_alone_name">
                        Phone Number:
                    </div>
                    <div class="f_alone_input">
                        <input class="f_p_input" />
                    </div>
                    <!--Hint Message-->
                    <div class="f_pormat">
                        Please input correct Phone Number
                    </div>
                </div>
                <div class="f_alonediv1">
                    <div class="f_alone_name">
                    </div>
                    <div class="f_alone_input1">
                        <!--publicbtn-->
                        <div class="publicf_btn">
                            <div class="publicf_btn1">
                                Conform
                            </div>
                            <div class="publicf_btn2 fr Js_closeBtn">
                                Cancel
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="PublicFloatBox password">
        <div class="f_MiddleBox wid400">
            <div class="f_Head">
                <span>Modify Password</span>
                <i class="Js_closeBtn2 iconfont icon-buoumaotubiao20 fr"></i>
            </div>
            <div class="f_content">
                <div class="f_alonediv">
                    <div class="f_alone_name">
                        New Password:
                    </div>
                    <div class="f_alone_input">
                        <input class="f_p_input" />
                    </div>
                </div>
                <div class="f_alonediv">
                    <div class="f_alone_name">
                        Again:
                    </div>
                    <div class="f_alone_input">
                        <input class="f_p_input" />
                    </div>
                </div>
                <div class="f_alonediv1">
                    <div class="f_alone_name">
                    </div>
                    <div class="f_alone_input1">
                        <!--publicbtn-->
                        <div class="publicf_btn">
                            <div class="publicf_btn1">
                                Conform
                            </div>
                            <div class="publicf_btn2 fr Js_closeBtn2">
                                Cancel
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
<!--返回顶部-->
<a href="javaScript:void();" class="back-to-top"><i class="iconfont icon-fanhuidingbu"></i> </a>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var qwe1 = new Vue({
                    el: '#app11',
                    data(){
                        return { 
                            value1: 0,
                            value2: 0
                        }
                    },
                    methods:{
                        post:function(){
                            //发送 post 请求
                        axios.post('https://www.runoob.com/try/ajax/demo_axios_post.php', {
                            firstName: 'Fred',        // 参数 firstName
                            lastName: 'Flintstone'    // 参数 lastName
                        })
                        .then(function (response) {
                            console.log(response);
                            this.info = response
                            document.write(response.data.name);
                            document.write(response.data.url);
                        })
                        .catch(function (error) {
                            console.log(error);//请求失败处理
                        });
                        }
                    }
                })
    var asd1 = new Vue({
        el: '#app22',
        data() {
            return {
                color1: '#409EFF',
                color2: null
            }
        }
    })
    $(".door").toggle(function() {
            $(".DOOR").attr("src", "images/door/0.png");
            document.getElementById('DOOR').innerText="Closed";
            document.getElementById('door').innerText="Open";
        }, function() {
            $(".DOOR").attr("src", "images/door/1.png");
            document.getElementById('DOOR').innerText="Open";
            document.getElementById('door').innerText="Closed";
        })
    $(".window").toggle(function() {
            $(".WINDOW").attr("src", "images/window/0.png");
            document.getElementById('WINDOW').innerText="Closed";
            document.getElementById('window').innerText="Open";
        }, function() {
            $(".WINDOW").attr("src", "images/window/1.png");
            document.getElementById('WINDOW').innerText="Open";
            document.getElementById('window').innerText="Closed";
        })
    $(".cover1").toggle(function() {
            $(".COVER").attr("src", "images/cover/0.png");
            document.getElementById('COVER').innerText="Closed";
            document.getElementById('cover1').innerText="Open";
        }, function() {
            $(".COVER").attr("src", "images/cover/2.png");
            document.getElementById('COVER').innerText="Open";
            document.getElementById('cover1').innerText="Closed";
        })
    $(".cover2").toggle(function(){
            $(".COVER").attr("src", "images/cover/1.png");
            document.getElementById('COVER').innerText="Auto";
    }, function(){
        $(".COVER").attr("src", "images/cover/1.png");
            document.getElementById('COVER').innerText="Auto";
    })
    $(".fan1").toggle(function() {
            $(".FAN").attr("src", "images/fan/0.png");
            document.getElementById('FAN').innerText="Closed";
            document.getElementById('fan1').innerText="Open";
        }, function() {
            $(".FAN").attr("src", "images/fan/2.png");
            document.getElementById('FAN').innerText="Open";
            document.getElementById('fan1').innerText="Closed";
        })
    $(".fan2").toggle(function(){
            $(".FAN").attr("src", "images/fan/1.png");
            document.getElementById('FAN').innerText="Auto";
    }, function(){
        $(".FAN").attr("src", "images/fan/1.png");
            document.getElementById('FAN').innerText="Auto";
    })
    $(".FIRE").toggle(function() {
            $(".FIRE").attr("src", "images/fire/0.png");
            document.getElementById('FIRE').innerText="Safe";
            document.getElementById('fire').innerText="Danger";
        }, function() {
            $(".FIRE").attr("src", "images/fire/1.png");
            document.getElementById('FIRE').innerText="Danger";
            document.getElementById('fire').innerText="Safe";
        })
    $(".sec").toggle(function() {
            $(".SEC").attr("src", "images/sec/0.png");
            document.getElementById('SEC').innerText="Off";
            document.getElementById('sec').innerText="On";
        }, function() {
            $(".SEC").attr("src", "images/sec/1.png");
            document.getElementById('SEC').innerText="On";
            document.getElementById('sec').innerText="Off";
        })       
    $(".LAMP").toggle(function() {
        if(qwe1.value1==0){
            $(".LAMP").attr("src", "images/lamp/0.png");
            document.getElementById('LAMP').innerText="Closed";
        }
            else if(qwe1.value1==1){
                $(".LAMP").attr("src", "images/lamp/1.png");
                document.getElementById('LAMP').innerText="Open";
            }
            else if(qwe1.value1==2){
                $(".LAMP").attr("src", "images/lamp/2.png");
                document.getElementById('LAMP').innerText="Open";
            }
            else if(qwe1.value1==3){
                $(".LAMP").attr("src", "images/lamp/3.png");
                document.getElementById('LAMP').innerText="Open";
            }
            else if(qwe1.value1==4){
                $(".LAMP").attr("src", "images/lamp/4.png");
                document.getElementById('FIRE').innerText="Open";
            }
            else if(qwe1.value1==5){
                $(".LAMP").attr("src", "images/lamp/5.png");
                document.getElementById('LAMP').innerText="Open";
            }
        }, function() {
            if(qwe1.value1==0){
            $(".LAMP").attr("src", "images/lamp/0.png");
            document.getElementById('LAMP').innerText="Closed";
        }
            else if(qwe1.value1==1){
                $(".LAMP").attr("src", "images/lamp/1.png");
                document.getElementById('LAMP').innerText="Open";
            }
            else if(qwe1.value1==2){
                $(".LAMP").attr("src", "images/lamp/2.png");
                document.getElementById('LAMP').innerText="Open";
            }
            else if(qwe1.value1==3){
                $(".LAMP").attr("src", "images/lamp/3.png");
                document.getElementById('LAMP').innerText="Open";
            }
            else if(qwe1.value1==4){
                $(".LAMP").attr("src", "images/lamp/4.png");
                document.getElementById('LAMP').innerText="Open";
            }
            else if(qwe1.value1==5){
                $(".LAMP").attr("src", "images/lamp/5.png");
                document.getElementById('LAMP').innerText="Open";
            }
        })
</script>

</html>